<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\node_modules\vue\dist\vue.js"></script>

</head>
<body>
<div id="app">
    <span v-for="l,index in list">
        {{l.e}}
        <input type="text" v-model="l.c" v-bind:key="index" v-foucs:[unit]="n+10" v-fs>
    </span>

    <button v-on:click="add">add</button>
</div>
</body>
<script type="application/javascript">
    //第一次打开页面：bind（dom element生成vnode，绑定value，一次性循环完毕。） ->
    // inserted（dom element插入，一次性循环完毕。）
    //修改input：update（app.$data.xx下的其他vnode刷新，应用vnode的响应式patch，嵌套循环。）->
    // componentUpdated（与update同理）
    //修改directive的依赖值，比如app.$date.n：效果于修改input同理。
    Vue.directive(
        'foucs', {
            bind:function(el, dir, vnode, oldVnode, isDestroy){
                var fontSize = Number.parseInt(el.value) + Number.parseInt(dir.value);
                el.style.setProperty("font-size" , fontSize + dir.arg);
            },
            inserted:function(el, dir, vnode, oldVnode, isDestroy){
                el.focus();
            },
            update:function(el, dir, vnode, oldVnode, isDestroy){
                console.log(el);
            },
            componentUpdated:function(el, dir, vnode, oldVnode, isDestroy){
                console.log(el);
            },
            unbind:function(el, dir, vnode, oldVnode, isDestroy){
                console.log(el);
            }
        }
    );

    var app = new Vue({
        el: '#app',
        data: {
            n:10,
            list:[{"c":"1","e":"one"},{"c":"2","e":"two"}],
            p: {p1:"1",p2:"2"},
            unit:"px"
        },
        directives:{
            fs:{
                inserted:function(el){
                    el.title += 'right;'
                }
            }
        },
        methods:{
            add:function(){
                this.n += 1;
            }
        }
    });
</script>
</html>
